<template>
  <span class="main-link" :style="{ color, '--borderColor': color }" @click="linkClick">
    {{ title }}
  </span>
</template>
<script>
  export default {
    name: 'MainLink',
    props: {
      title: {
        type: String
      },
      color: {
        type: String,
        default: '#444444'
      }
    },
    methods: {
      linkClick() {
        this.$emit('linkClick')
        this.$emit('click')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .main-link {
    display: inline-block;
    margin-right: 16px;
    box-sizing: border-box;
    border-bottom: 1px solid transparent;
    &:hover {
      cursor: pointer;
      border-bottom: 1px solid var(--borderColor); 
    }
  }
</style>